<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ dbCount }}</h1>
    <button @click="changeCount">改变</button>
  </div>
</template>

<script setup>
import { ref, computed, isRef } from "vue";

let count = ref(10);

// 计算属性有缓存的作用 当他依赖的值发生变化的时候才会更新
// const dbCount = computed(() => count.value * 2);

const dbCount = computed({
  // 获取
  get() {
    console.log("get");
    return count.value * 2;
  },
  // 设置
  set(newVal) {
    console.log("set");
    count.value = newVal;
  },
});

const changeCount = () => {
  count.value++;
  dbCount.value = 100;
};

console.log("dbCount", dbCount);
</script>

<style scoped lang="scss"></style>
